import { reactive, nextTick  } from "vue"
// api
import { areaList } from "@/api/index"
export function useIndex(props) {

    /**
     * state
     */
    const useState = reactive({
        options: [],
        type: {
            0: "province",
            1: "city",
            2: "area",
        }
    })
    /**
     * 遵循单一原则，什么单一原则
     * 单一原则是表示“ 一个函数只做一件事件 ”
     */

     /**
     * 获取数据
     * getlist，对数据处理，仅返回数据，不更新
     */
     const getList = (params = {}) => {
        return new Promise((resolve, reject) => {
            const level = params?.level || 0
            const req = {
                code: params?.code || 0,
                type: useState.type[level]
            }
            areaList(req).then(res => {
                const data = res.content
                // 更新叶节点
                data.forEach(item => item.isLeaf = (level === 2))
                resolve(data)
            }).catch(() => {
                reject()
            })
        })
    }

    /**
     * 初始化省份数据
     */
    const initData = () => {
        getList().then(res => {
            // 存在时做处理，不存在时不处理
            if(props.defaultValue.length) {
                const code = props.defaultValue[0][props.id]
                // 匹配第一个对象
                const firstOptions = res.filter(item => item[props.id] === code)
                if(firstOptions.length) {
                    firstOptions[0].children = props.defaultValue[0].children
                }
            }
            useState.options = res
            // 选择项是否需要置顶
            props.acitveTop && activeElemTop()
        })
    }

    /**
     * 动态加载
     * 是否是最后一级
     * isLeaf
     */
    const useLoadData = selectedOptions => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        console.log('targetOption', targetOption)
        targetOption.loading = true;
        getList(targetOption).then(res => {
            targetOption.loading = false
            targetOption.children = res
            // useState.options = [...res];
        }).catch(() => {
            targetOption.loading = false
        })
    };

    /**
     * 定位选中的元素置顶
     */
    const activeElemTop = () => {
        nextTick(() => {
            let list = document.querySelectorAll(".ant-cascader-menu")
            list = [...list]
            list.forEach((item) => {
                const parentDiv = item
                const childDiv = parentDiv.querySelector(".ant-cascader-menu-item-active")
                console.log('childDiv', childDiv)
                if(!childDiv) { return }
                // 滚动指定的子元素到父元素的顶部
                childDiv.scrollIntoView({ behavior: "smooth", block: "start" })
                // 或者使用scrollTop
                parentDiv.scrollTop = childDiv.offsetTop - parentDiv.offsetTop - 4
            })
        })
    }

    const useDropdownVisibleChange = (value) => {
        value && initData()
    }

    return {
        useState,
        useDropdownVisibleChange,
        useLoadData
    }
}